<template>
	<div class="home-screen-module2">
		<div class="item color1">
			<div class="circle">{{dataSource.receiptDoc}}</div>
			<div class="text">入库单</div>
		</div>
		<div class="item color2">
			<div class="circle">{{dataSource.outboundOrder}}</div>
			<div class="text">出库单</div>
		</div>
		<div class="item color3">
			<div class="circle">{{dataSource.countSheet}}</div>
			<div class="text">盘点单</div>
		</div>
	</div>
</template>

<script setup>
const props = defineProps({
	dataSource:{
		type:Object,
		default:function(){
			return {
				receiptDoc:0,
				outboundOrder:0,
				countSheet:0
			}
		}
	}
})
</script>

<style lang="scss" scoped>
.home-screen-module2{
	display: flex;
	justify-content: space-between;
	height: 100%;
	box-sizing: border-box;
	padding: 0 .5em;
	&>.item{
		display: flex;
		font-size: .18em;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		&>.circle{
			$circleSize:3.5em;
			border-width: 2px;
			border-radius: 50%;
			border-style: solid;
			width: $circleSize;
			height: $circleSize;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		&>.text{
			padding-top: .3em;
		}
		&.color1{
			$color1:#ffd700;
			color: $color1;
			&>.circle{
				border-color: $color1;
			}
		}
		&.color2{
			$color2:#20b2aa;
			color: $color2;
			&>.circle{
				border-color: $color2;
			}
		}
		&.color3{
			$color3:#32cd32;
			color: $color3;
			&>.circle{
				border-color: $color3;
			}
		}
	}
}
</style>